<template>
  <div>
    <!-- 表格 -->
    <div class="search" style="margin-top: 10px; font-size:12px;">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="patientName" label="患者姓名"></el-table-column>
        <el-table-column prop="roomNumber" label="房号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="roomPrice" label="费用" show-overflow-tooltip></el-table-column>
        <el-table-column prop="payFeeState" label="缴费状态" :formatter="formatStatus" show-overflow-tooltip></el-table-column>
        <el-table-column prop="hospitalInsurance" label="是否医保" :formatter="formatStatus" show-overflow-tooltip></el-table-column>
        <el-table-column prop="roomState" label="住院状态" :formatter="formatStatus" show-overflow-tooltip></el-table-column>
        <el-table-column width="150px" label="操作"  v-if="user.role === 'DOCTOR'">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">登记</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  编辑表单  -->
    <el-dialog title="住院登记表" :visible.sync="dialogFormVisibleUpdate">
      <el-form :model="updateForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="房号" prop="roomNumber">
          <el-input v-model="updateForm.roomNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="费用" prop="roomPrice">
          <el-input v-model="updateForm.roomPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="缴费状态" prop="payFeeState">
          <template>
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                  v-for="item in payFeeStates"
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value1">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="是否医保" prop="hospitalInsurance">
          <template>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                  v-for="item in hospitalInsurances"
                  :key="item.value2"
                  :label="item.label"
                  :value="item.value2">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="住院状态" prop="roomState">
          <template>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                  v-for="item in roomStates"
                  :key="item.value3"
                  :label="item.label"
                  :value="item.value3">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "HospitalView",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      params: {
        name: "",
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      tableData: [],
      dialogFormVisibleUpdate: false,
      updateForm: {},
      //缴费状态
      payFeeStates: [{
        value1: '1',
        label: '是'
      }, {
        value1: '-1',
        label: '否'
      }],
      value1: '-1',
      //是否医保
      hospitalInsurances: [{
        value2: '1',
        label: '是'
      }, {
        value2: '-1',
        label: '否'
      }],
      value2: '-1',
      //住院状态
      roomStates: [{
        value3: '1',
        label: '是'
      }, {
        value3: '-1',
        label: '否'
      }],
      value3: '-1',
    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();
  },
  methods: {
    // 条件查询
    findBySearch() {
      request.get("/Hospital/findBySearch", {params: this.params}).then(res => {
        if (res.data && res.data.list){
          this.tableData = res.data.list;
          this.total = res.data.total;
        }else {
          this.$message.error(res.msg);
        }
      }).catch(error => {
        console.error("Error occurred while fetching data:", error);
      });
    },

    //重置
    reset() {
      this.params.name = "";
      this.findBySearch()
    },

    //编辑按钮
    handleEdit(index, row) {
      this.dialogFormVisibleUpdate = true;
      console.log(row)
      this.updateForm.id = row.id;
      request.get("/Hospital/findById", {params: {id: row.id}}).then(res => {
        console.log(res)
        this.updateForm = res.data;
        this.value1 = res.data.payFeeState
        this.value2 = res.data.hospitalInsurance
        this.value3 = res.data.roomState
      })
    },

    //发起编辑请求
    update() {
      this.updateForm.payFeeState = this.value1
      this.updateForm.hospitalInsurance = this.value2
      this.updateForm.roomState = this.value3
      console.log(this.updateForm)
      request.get("/Hospital/update", {params: this.updateForm}).then(res => {
        console.log(res)
        if (res.code == 200){
          this.$message.success("登记成功!")
          this.dialogFormVisibleUpdate = false
          this.findBySearch()
        }else {
          this.$message.error(res.msg);
        }
      })
    },

    // 状态文字转换函数
    formatStatus(row, column, cellValue) {
      if (cellValue === '-1') {
        return '否';
      } else if (cellValue === '1') {
        return '是';
      } else {
        return '';
      }
    },

    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },


  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
